<template>
  <div class="page-card article-page">
    <h-query :showKey="['startTime,endTime']" :query="query" @search="search">
      <div slot="btn" class="a-button-right" style="margin-top: 36px">
        <a-space>
          <a-tag color="blue">被关注纪录: {{ detail.follow }} 条</a-tag>

          <!-- <a-tag color="red">已删除纪录: {{ detail.isDelete }} 条</a-tag> -->
        </a-space>

      </div>
      <!-- <h-tooltip slot="btn" title="表格 是否已删除 缺少字段" /> -->
    </h-query>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="false"
      :zebraStripes="false">
      <span slot="link" slot-scope="{text}">
        <a :href="text" target="_blank">{{ text }}</a>
      </span>
      <span slot="isDelete" slot-scope="{text}">
        <a-tag color="red" v-if="text == -1">是</a-tag>
        <a-tag v-else>否</a-tag>
      </span>
    </h-table>

  </div>
</template>
<script>
import { impArticle, getArticlesum } from '@/api/serve';
export default {
  data() {
    return {
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '文章标题',
            dataIndex: 'title',
            width: 400
          },
          {
            align: 'center',
            title: '文章来源渠道',
            dataIndex: 'source'
          },
          {
            align: 'center',
            title: '创建时间',
            dataIndex: 'reaseTime'
          },
          {
            align: 'center',
            title: '阅读数',
            dataIndex: 'readNum'
          },
          {
            align: 'center',
            title: '点赞数',
            dataIndex: 'likeNum'
          },
          {
            align: 'center',
            title: '转发数',
            dataIndex: 'transNum'
          },
          {
            align: 'center',
            title: '评论数',
            dataIndex: 'commentNum'
          }
          // {
          //   align: 'center',
          //   title: '是否已删除',
          //   dataIndex: 'isDelete',
          //   scopedSlots: { customRender: 'isDelete' }
          // }
        ],
        pagination: {
          total: 100
        }
      },
      form: {

      },
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      detail: {},
      query: [
        {
          key: 'title',
          label: '标题',
          type: 'input'
        },
        {
          key: 'isDelete',
          label: '状态',
          type: 'select',
          options: [
            {
              label: '已删除',
              value: -1
            },
            {
              label: '未删除',
              value: 0
            },
            {
              label: '全部',
              value: ''
            }
          ]
        }
      ]
    };
  },
  created() {
    this.getArticlesum();
  },
  methods: {
    getList(params) {
      if (params) Object.assign(this.queryParams, params);
      impArticle(this.queryParams).then(res => {
        this.config.dataSource = res.data.records;
        this.config.pagination.total = res.data.total;
      });
    },
    changeStatus({ id, status }) {
      this.$message.success(status ? '发布成功' : '下线成功');
    },
    remove(record) {
      this.$message.success('删除成功');
      this.$refs.htable.refresh(true);
    },
    search(query) {
      Object.assign(this.queryParams, query, { start: query.startTime, end: query.endTime });
      this.$refs.htable.refresh();
    },
    showMsg() {
      if (!this.selectedRowKeys.length) {
        this.$message.error('请先选择人员');
        return;
      }
      this.show = true;
    },
    select({ selectedRow, selectedRowKeys }) {
      this.selectedRow = selectedRow;
      this.selectedRowKeys = selectedRowKeys;
      console.log(this.selectedRow);
    },
    deleteUser({ id }) {
      const index = this.selectedRowKeys.findIndex(e => e.id == id);
      // const indexRow = this.selectedRowKeys.findIndex(e => e.id == id);
      if (index > -1) this.selectedRowKeys.splice(index, 1);
    },
    submit() {
      if (!this.selectedRowKeys.length) {
        this.$message.error('请先选择人员');
        return;
      }

      if (!this.form.message) {
        this.$message.error('请输入短信内容');
        return;
      }
      this.show = false;
      this.$message.success('发送成功');
    },
    getArticlesum() {
      getArticlesum().then(res => {
        this.detail = res.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.article-page {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
